<template>
	<view class="container">
		<!-- 已选中商品区域 -->
		<u-sticky bgColor="#fafafa">
			<view class="mainpadding2">
				<view class="selected-section mainpadding">
					<view class="section-title">
						<view class="title-left">
							<uni-text class="title-text">已选中商品</uni-text>
							<uni-text class="count-text">({{returncheckNum()}})</uni-text>
						</view>
						<view class="delete-all" @click="resetall">
							<u-icon name="trash" color="#ff6b6b"></u-icon>
							<uni-text class="delete-text">重置</uni-text>
						</view>
					</view>
				</view>
				<view class="flexbetween">
					<u--input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
						placeholder="請輸入蒐索內容" v-model="keyname" @confirm="searchGoods"></u--input>
					<view class="" @click="getCode()">
						<u-icon name="scan" color="#ffb800" size="28"></u-icon>
					</view>
				</view>
				<u-tabs lineColor="#FFB800" lineWidth="15" :current="tabcurrent" :activeStyle="{
				             color: '#000000',
				             fontWeight: 'bold',
				             transform: 'scale(1.05)'
				         }" :inactiveStyle="{
				             color: '#666666',
				             transform: 'scale(1)'
				         }" :list="tabList" @click="tabclick" @change="tabChage"></u-tabs>
				<view class="flexbetween" style="padding: 30rpx 30rpx 0;background-color: #fafafa;">
					<view class="flexcenter" @click="jumpurl('/pages/workbench/classifyScreen')">
						<view class="hui_text main_size bold">分類篩選</view>
					</view>
					<view class="flexcenter" @click="selectCom">
						<view :class="type==0?'hei_text main_size bold':'hui_text main_size bold'">綜合排序</view>
					</view>
					<view class="flexcenter" @click="selectSale">
						<view :class="(type==1||type==2)?'hei_text main_size bold':'hui_text main_size bold'">銷量排序
						</view>
						<view class="flexcolumn">
							<view :class="type==2?'checkshang':'nocheckshang'"></view>
							<view :class="type==1?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
						</view>
					</view>
					<view class="flexcenter" @click="selectPrice">
						<view :class="(type==3||type==4)?'hei_text main_size bold':'hui_text main_size bold'">價格排序
						</view>
						<view class="flexcolumn">
							<view :class="type==4?'checkshang':'nocheckshang'"></view>
							<view :class="type==3?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
						</view>
					</view>
				</view>
			</view>

		</u-sticky>
		<view class="mainpadding2">
			<view class="" style="padding-bottom: 150rpx;">
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				</view>
				<view class="mainpadding_top  ffffff radius" style="position: relative;" v-for="item in list.data"
					:key="item.id" @click="checkitem(item)">
					<view class="checkfocus" v-if="item.ischeck">
						<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
					</view>
					<view class="pdl ">
						<view class="flexleft">
							<view class="listleftimg radius margin_right">
								<image class="listleftimg radius" :src="item.logoimage" mode=""></image>
							</view>
							<view style="width: 100%;">
								<view class="hei_text main_size bold">{{item.name}}</view>
								<!-- <view class="xiaohui">
									类别:  {{item.gsname}}
								</view> -->
								<view class="flexleft margin_top2">
									<view class="neiyong lableradius xiaohuang margin_right2">免運</view>
									<view class="xiaohui">月售{{item.count}} <text
											v-if="item.end_num!=-1">庫存{{item.end_num}}</text>
										<text v-if="item.end_num==-1">不限庫存</text>
									</view>
								</view>
								<view class="flexbetween margin_top2">
									<view class="xiaohui" v-if="item.is_grounding==1">上架時間 {{item.date}}</view>
									<view class="xiaohui" v-if="item.is_grounding==0">下架時間 {{item.enddate}}</view>
									<view class="main_size huang_text bold">${{Number(item.new_price).toFixed(0)}}
									</view>
								</view>
							</view>
						</view>
						<view class="xiaohui margin_top2" v-show="item.barcode">國際條碼:{{item.barcode}}</view>
						<view class="xiaohui margin_top2" v-if="item.shopformula_id && item.shopformula">
							計算方式:{{item.shopformula.name}}</view>
						<scroll-view scroll-x="true">
							<view class="flexleft margin_right margin_top">
								<view class="zhizuo lableradius xiaohuang margin_right2" style="white-space: nowrap;"
									v-for="current in item.gsname" :key="current.id">
									{{current.name}}/{{Number(current.price_j).toFixed(0)}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="posibottom ffffff mainpadding">
			<view class="submitbtn flexcenter mainpadding hei_text titletext bold" @click="submit()">载入</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showEdit: false,
				tabList: [],
				tabsId: 1,
				shop_id: uni.getStorageSync("shop_id"),
				pid: 0, //当前分类id
				shopclassify_id: "", //分类id
				type: 0, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
				keyname: "", //商品名称
				page: 1,
				list: {
					data: []
				},
				isGet: false,
				id: "", //要刪除的商品id
				flag: false, //是否允许整体编辑,
				// classname:""
				tabcurrent: 0,
				listids:[]
			}
		},
		watch: {
			keyname(newVal, oldVal) {
				if (!newVal) {
					this.flag = false
				}
			}
		},
		onLoad(options) {
			this.listids = options.goods_ids.split(',')
			uni.$on("returnCode", data => {
				this.keyname = data
				this.getGoodsList()
			})
			uni.$on("screentext", data => {
				this.shopclassify_id = ""
				this.keyname = data
				this.getGoodsList()
			})
			this.getGoodsCate()
		},
		onUnload() {
			uni.$off("returnCode")
			uni.$off("screentext")
		},
		onShow() {
			this.$nextTick(() => {
				// 解决uview u-tab，下划线异常
				this.tabcurrent = 0
			});
			this.getGoodsList()
		},
		methods: {
			returncheckNum() { //選中商品的數量
				let num = 0
				this.list.data.forEach(item => {
					if (item.ischeck) {
						num = num + 1
					}
				})
				return num
			},
			resetall() { //重置
				this.list.data.forEach(item => {
					item.ischeck = false
				})
			},
			checkitem(item) {
				item.ischeck = !item.ischeck
			},
			submit() { //提交
				let ids = []
				this.list.data.forEach(item => {
					if (item.ischeck) {
						ids.push(item.id)
					}
				})
				uni.$emit("chooseGoods", ids.join())
				uni.navigateBack(1)
			},
			getCode() {
				uni.navigateTo({
					url: "/pages/my/getcodetwm"
				})
			},
			getGoodsCate() { //商品分类
				let _this = this
				this.http.request('/api/shop/shopCategory', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res => {
					if (res.code == 1) {
						this.tabList = res.data
						this.tabList.unshift({
							name: "全部",
							id: ""
						})
						this.isGet = true
					} else if (res.code == 0) {
						// this.http.toast(res.msg)
					} else {
						this.http.toast('系統處理中，請稍後再試');
					}
				})

			},
			async getGoodsList(isPage, page) { //商品列表
				let _this = this
				let shopclassify_id = this.shopclassify_id == "" ? [] : this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length == 0 ? "" : shopclassify_id[shopclassify_id.length - 1] ==
					"" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let res = await this.http.request('/api/goods/listGoods', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id, //店鋪id
					shopclassify_id: category_id,
					type: this.type, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
					name: this.keyname, //商品名称
				})
				uni.hideLoading()
				if (res.code == 1) {
					let logoimage_text = []
					res.data.data.forEach(item => {
						item.logoimage = this.imgUrlUser + item.logoimage;
						item.ischeck = false;
						this.listids.forEach(current => {
							if (current == item.id) {
								item.ischeck = true
							}
						})
					})
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						_this.list.data = resList.data;
					}
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getGoodsList(true, page);
			},
			searchGoods() { //搜索商品
				if (this.keyname) {
					this.flag = true
				}
				this.getGoodsList()
			},
			goincrease() { //整体调整
				if ((this.tabcurrent == 0 && this.keyname != "") || this.tabcurrent != 0) {
					if (this.list.data.length) {
						this.showEdit = true
					} else {
						this.http.toast("沒有符合條件的商品哦！")
					}
				} else {
					this.http.toast("請先搜索商品！")
				}
			},


			selectCom() { //综合排序
				this.type = 0
				this.getGoodsList()
			},
			selectSale() { //销量排序
				this.type = this.type == 1 ? 2 : 1
				this.getGoodsList()
			},
			selectPrice() { //价格排序
				this.type = this.type == 3 ? 4 : 3
				this.getGoodsList()
			},


			tabclick(e) {
				this.tabcurrent = e.index
			},
			tabChage(e) {
				console.log(e);
				this.shopclassify_id = e.id + ","
				this.getGoodsList()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.chooseTitle {
		background-color: #ffffff;
		text-align: left;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.posibottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.popupBox {
		width: 587rpx;
		height: 504rpx;
		background: #FAFAFA;
		border-radius: 30rpx 30rpx 30rpx 30rpx;

		.text_36 {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.allEdit {
			width: 386rpx;
			height: 85rpx;
			background: #ffb800;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 60rpx auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.allRemove {
			width: 386rpx;
			height: 85rpx;
			background: #ffffff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #ffb800;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffb800;
		}
	}


	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.section {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 20rpx;
	}

	.title-left {
		display: flex;
		align-items: center;
	}

	.title-text {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.delete-all {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff5f5;
		border-radius: 24rpx;
		cursor: pointer;
	}

	.delete-text {
		font-size: 12px;
		color: #ff6b6b;
		margin-left: 8rpx;
	}

	.count-text {
		font-size: 14px;
		color: #999;
		margin-left: 10rpx;
	}
</style>